<template>
    <div>
                  <div class="case-child-end2 flex">
                        <div class="flex row">  

                              <div class="case-state1 flex"> 
                              <p>客户行业类型：</p>
                              <el-select v-model="Trade_Type" placeholder="请选择" @change="changeCustom(Trade_Type)"> 
                                <el-option v-for="item in customList" :key="item.Id" :label="item.Value"  :value="item.Id"> </el-option>
                              </el-select>
                              </div>      

                              <div class="case-state1 flex"> 
                              <p>客户类型：</p>
                              <el-select v-model="Custom_Type" placeholder="请选择" @change="changeCustomType(Custom_Type)"> 
                                <el-option v-for="item in customTypeList" :key="item.Id" :label="item.Value"  :value="item.Id"> </el-option>
                              </el-select>
                              </div>      

                              <div class="case-state1 flex"> 
                              <p>业务类型：</p>
                              <el-select v-model="Custom_Type" placeholder="请选择" @change="changeCustomType(Custom_Type)"> 
                                <el-option v-for="item in customTypeList" :key="item.Id" :label="item.Value"  :value="item.Id"> </el-option>
                              </el-select>
                              </div>      

                              <div class="case-state1 flex">
                                <p>案件类型：</p>
                                  <el-select v-model="Casevalue" placeholder="请选择" @change="getSelectChildeMenu(Casevalue)"> 
                                    <el-option v-for="item in optionMenu" :key="item.Id" :label="item.Category_Name"  :value="item.Id"> </el-option>
                                  </el-select>

                                  <el-select v-model="Casevalue1" placeholder="请选择" style="margin-left: 10px;" @change="changeTowValue(Casevalue1)">
                                  <el-option v-for="(item,index) in optionChildMenu" :key="index" :label="item.Value"  :value="item.Id"> </el-option>
                                </el-select>
                              </div>
                        </div>
                      </div>


                      <div class="case-child-end2 flex">
                        
                        <div class="flex row">  
                        <div class="case-state1 flex">
                          <p>案件状态：</p> 
                          <el-select v-model="value" placeholder="请选择" style="margin-left: 10px;" @change="changeStatus(value)"> 
                          <el-option v-for="item in options"  :key="item.value"  :label="item.label" :value="item.value"></el-option>
                          </el-select>
                        </div>    
                        
                        <div class="case-state1 flex">
                          <p>起止时间：</p>
                          <el-date-picker
                          @change="changeTime"
                          v-model="dateValue"
                          type="daterange"
                          :picker-options="pickerOptions2"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          align="right">
                          </el-date-picker>
                        </div>

                      </div>
                      </div>


                        <el-table :data="tableData" border style="width: 100%"  @row-click="lineCilck" :header-cell-style="cellStyle" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
                            <el-table-column prop="Staff_Name" label="主办律师(共13条)" width=""> </el-table-column>
                        </el-table>
                          

                        <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart2"></div>
                         
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
    props: {
      className: {
        type: String,
        default: 'echartDiv'
      },
      id: {
        type: String,
        default: 'yourID'
      },
      width: {
        type: String,
        default: '850px'
      },
      height: {
        type: String,
        default: '500px'
      }
    },
    data(){
        return{

          tableData:[
            {Staff_Name:"广东奇点智慧科技有限公司"},
            {Staff_Name:"广东化州猿术科技有限公司"},
            {Staff_Name:"广州测试科技有限公司"}
          ]
            
        }
    },
    created(){
     
    },
    mounted(){
      this.initChart2()
      
    },
    beforeDestroy() {
         
    },
    methods:{
      initChart2(){
      this.$http.get('/yongxu/Statistics/Sel_Industry_Type',{params:{MinTime:this.MinTime2,MaxTime:this.MaxTime2,User_Id:localStorage.getItem('userId')}}).then((res)=>{
            var _self =this
                // console.log(this.MinTime2)
                //  console.log(this.MaxTime2)
                var bingArr = res.data
                // console.log(res)
                 _self.bingArr = []
                for(var i = 0;i<bingArr.length;i++){
                    _self.bingArr1[i] = bingArr[i].name.replace(/[\r\n]/g,"")
                    _self.bingArr3[i] = bingArr[i].value
                    _self.bingArr.push({name:bingArr[i].name.replace(/[\r\n]/g,""),value:bingArr[i].value})
                 }
      }).then(()=>{
          this.chart2 = echarts.init(this.$refs.myEchart2);
          this.chart2.setOption({
          title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
        })
                                       
      })
      },
    } 
}
</script>
<style>

.case-child-end2{
  margin-bottom:20px;
}
</style>


